<!-- 开放管理-数据分析-违规查询 -->
<template>
  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">

   <div class="JNPF-common-layout">
     <div class="JNPF-common-layout-center">
      
       <el-row class="JNPF-common-search-box" :gutter="16">
           <el-form @submit.native.prevent>
               <el-col :span="10">
                <el-date-picker v-model="fbillcredate" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
             </el-col>

              <el-col :span="6">
               <el-select v-model="value" placeholder="请选择学校">
                   <el-option
                   v-for="item in options1"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                   </el-option>
               </el-select>
             </el-col>

             <template v-if="showAll">
         
               <el-col :span="6">
               <el-select v-model="value" placeholder="请选择年级">
                   <el-option
                   v-for="item in options2"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                   </el-option>
               </el-select>
             </el-col>

             <el-col :span="6">
               <el-select v-model="value" placeholder="请选择班级">
                   <el-option
                   v-for="item in options3"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                   </el-option>
               </el-select>
             </el-col>
             </template>

             <el-col :span="6">
                   <el-form-item label="">
                       <el-button type="primary" icon="el-icon-search">查询</el-button>
                       <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true" v-if="!showAll">展开</el-button>
                       <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else>收起</el-button>
                   </el-form-item>
             </el-col>

           </el-form>
       </el-row>

       <div class="JNPF-common-layout-main JNPF-flex-main">
         <div id="pieChart1" ref="pieChartRef1"  style="width: 100%; height: 250px"></div>
       </div>

       <div class="JNPF-common-search-box">
        <JNPF-table :data="list" border v-loading="loading">
         <el-table-column prop="FCLASS" label="班级"></el-table-column>
         <el-table-column prop="F01" label="责任感强"></el-table-column>
         <el-table-column prop="F02" label="动手能力" ></el-table-column>
         <el-table-column prop="F03" label="行动能力"></el-table-column>
         <el-table-column prop="F04" label="表达能力"> </el-table-column>
         <el-table-column prop="F05" label="情绪稳定"> </el-table-column>
         <el-table-column prop="F06" label="心里健康"> </el-table-column>
        </JNPF-table>
       </div>
    </div>
   </div>
  </ul>
</template>
 
<script>
 import jnpf from "@/utils/jnpf"
 import * as echarts from 'echarts';
 export default {
   name: '',
   props: {},
   components: '',
   data() {
     return {
       showAll:false,
       fbillcredate: [jnpf.dateFormat(new Date(), "YYYY-MM-DD"), jnpf.dateFormat(new Date(), "YYYY-MM-DD")],

       list:[{FDATE:"1-1",F01:0,F02:2,F03:0,F04:6,F05:3,F06:2},
             {FDATE:"1-2",F01:0,F02:1,F03:2,F04:12,F05:0,F06:0},
             {FDATE:"1-3",F01:0,F02:4,F03:0,F04:8,F05:1,F06:6}],
       //所属校区选择数据
       options1: [{
          value: '20E01',
          label: '闵行春申小学'
            }, {
              value: '20E02',
              label: '闵行莘城中学'
            }, {
              value: '20N01',
              label: '闵行莘松中学'
            }, {
              value: '20N02',
              label: '闵行莘庄中学'
            }],
       
       chart: null,
       _thisForChart: null,
       _thisForWindow: null,
       colorItem: {
         "北京": '#ff6161',
         "上海": '#e0815b',
         "广州": '#ffaf33',
         "深圳": '#637be6',
         "成都": '#a1b2ff',
         "西安": '#b3daff',
       },
     }
   },
   created() {},
   mounted () {
     this.$nextTick(() => {
       this.initPieChart();
       this.addEventListenerToSidebarContainer(this)
       this.addEventListenerToWindowResize(this)
     });
     },
     beforeDestroy () {
     this.removeEventListenerToSidebarContainer()
     this.removeEventListenerToWindowResize()
   },
   computed: {},
   watch: {},  
   methods: {
     initPieChart () {
       let echartData = [
         {
           name:'责任感强',
           value: '0.99',
         },
         {
           name:'动手能力',
           value: '0.29',
         },
         {
           name:'行动能力',
           value: '0.44',
         },
         {
           name:'表达能力',
           value: '0.14',
         },
         {
           name:'情绪稳定',
           value: '0.21',
         },
         {
           name:'心里健康',
           value: '0.77',
         },
       ]
       var chartDom = document.getElementById('pieChart1');
       this.chart = echarts.init(chartDom);
       let handleEchartData = echartData .map((item3) => {
         return {
           value: item3.value,
           name: item3.name,
           itemStyle: {
             color: this.colorItem[item3.name]
           }
         }
       })
       let option = {
           // color: ['#EE3F3F','#ff6161','#e0815b','#e0a188','#FFB441','#FFDAA1',],
           // tooltip: {
              // show: true,
              // trigger: 'item',
              // backgroundColor: 'rgba( 0, 0, 0,0.7)',
              // borderColor: 'rgba( 0, 0, 0,0.7)',
              // triggerOn: "click", // 点击事件
              // enterable: true, // 鼠标可移入提示框浮层中，默认为false
              // position: ['53%','40%'],
              // fontSize: 10,
              // formatter:function(params, ticket,callback) {
                // 实际请求接口，获取对应的数据
                // let req_data = {
                //   name: params.name,
                // }
                // testApi.getDetail(req_data).then((res) => {
                //   if (res.data && res.data.length) {
                //     for(let i = 0; i < res.data.length; i++) {
                //     list.push(
                //       "<div style='display:flex;align-items:center;justify-content:space-between;transform:scale(0.9)'><span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + res.data[i].code + "</span>" + "<span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + res.data[i].name + "</span>"+  "<span style='padding-right:10px;margin-bottom: -20px;color: #fff;'>" + "权重:" + res.data[i].WEIGHT + '%' + "</span></div>"
                //     )
                //   }
                //   listItem = list.length < 12 ? "<div style='margin-bottom:8px;padding-bottom:8px;'>" + list.join('<br/>') + "</div>" : "<div style='height: 235px;overflow-y: auto;margin-bottom:8px;padding-bottom:8px;'>" + list.join('<br/>') + "</div>"
                //   callback(ticket, listItem)
                //   } else {
                //     listItem = "<div>"+ '数据为空' + "</div>"
                //     callback(ticket, listItem)
                //   }
                // })
                // return "<span>"+ "数据请求中..." + "</span>"
               // }
              // },
             legend: {
                 bottom: 0,
                 textStyle: {
                     rich: {
                         name: {},
                         value: {
                             align: 'right',
                             padding: [0, -80, 0 ,0],
                         }
                     }
                 },
               formatter: function(name) {
                 let value
                 for (let i = 0; i < echartData.length; i++) {
                     if (echartData[i].name === name) {
                         value = echartData[i].value
                     }
                 }
                 var val = value
                 return [`{name|${name}}` + '：' + `{value|${val}%}`]
                 },
                 },
                 series: [
                   {
                     name: '',
                     type: 'pie',
                     radius: ['45%', '65%'],
                     center:['50%' ,'40%'],
                     avoidLabelOverlap: true,
                     label: {
                     show: false,
                     position: 'center',
                     // formatter: function(params) {
                             // 	return '{name|' +  params.name + '}' + '\n' +  '{value|' + params.data.value + '%' + '}'
                             // }, 
                             // rich: {
                             // 	name: {
                             // 		fontSize: 14,
                             // 	},
                             // 	value: {
                             // 		fontSize: 20,
                             // 		lineHeight: 30,
                             // 	}
                             // }
                       },
                     emphasis: {
                     label: {
                        show: true,
                                 lineHeight: 30,
                                 formatter: function(params) {
                                   return '{name|' +  params.name + '}' + '\n' +  '{value|' + params.data.value + '%' + '}'
                               }, 
                                 rich: {
                                     name: {
                     // color: "inherit",
                                         fontSize: 14,
                                     },
                                     value: {
                     color: "inherit",
                                         // fontSize: 20,
                                         // lineHeight: 30,
                                     }
                                 },
                                 textStyle: {
                   fontSize: 20,
                   fontWeight: 700,
                                },
                              }  
                          },
                   labelLine: {
                   show: false,
                   length: 7,
                   length2: 6,
                   lineStyle: {}
                   },
                  data: handleEchartData,
                  }
               ]
            };
         this.chart.setOption(option);
     },
 
     // 监听侧边栏导航的宽度发生变化
     addEventListenerToSidebarContainer(_this) {
       let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
       this._thisForChart = _this;
       sidebarContainer &&
         sidebarContainer.addEventListener("transitionend", this.sidebarResizeHandler);
     },
     removeEventListenerToSidebarContainer() {
       let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
       this._thisForChart = null
       sidebarContainer &&
         sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);
     },
 
     sidebarResizeHandler(e) {
       if (e.propertyName === "width") {
         this._thisForChart.chart.resize();
       }
     },
 
     // window 的尺寸发生变化的时候 会执行图表的resize
     addEventListenerToWindowResize(_this) {
       this._thisForWindow = _this;
       window.addEventListener("resize", this.windowResizeHandler);
     },
     removeEventListenerToWindowResize(_this) {
      this. _thisForWindow = null
       window.removeEventListener("resize", this.windowResizeHandler);
     },
 
     windowResizeHandler(e) {
       this._thisForWindow.chart.resize();
     },
         
   },
 }
 </script>
 
 <style lang="scss" scoped>
 
 </style>
 